[data-marqy] {
  position: relative;
  overflow: hidden;
}

[data-marqy-inner] {
  display: flex;
}

[data-marqy][data-direction='right'] [data-marqy-inner] {
  justify-content: flex-end;
}

[data-marqy-content] {
  display: flex;
  flex: 1 0 auto;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  will-change: transform;
}

[data-marqy][data-direction='left'] [data-marqy-content] {
  animation-name: marqyL;
}

[data-marqy][data-direction='right'] [data-marqy-content] {
  animation-name: marqyR;
}

[data-marqy][data-pause-on-hover]:hover [data-marqy-content] {
  animation-play-state: paused;
}

[data-marqy-item] {
  flex-grow: 0;
}

@keyframes marqyL {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes marqyR {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

@media (prefers-reduced-motion) {
  [data-marqy-inner] {
    overflow-x: scroll;
  }

  [data-marqy-content] {
    animation: none !important;
  }
}

.marquee {
  @apply border-b;
  
  &--item {
    @apply flex;
  }

  &--text {
    @apply block p-32 text-48 leading-100;
  }

  &--photo {
    @apply relative w-120 sm:w-200 px-32 py-16 sm:px-48 sm:py-32;

    [data-theme='metal'] & {
      filter: invert(43%) sepia(83%) saturate(3151%) hue-rotate(337deg) brightness(92%) contrast(111%);
    }

    img {
      html:not([data-theme='dark']) & {
        filter: invert(1);
      }
    }
  }

  &--product {
    @apply flex flex-col -my-1 max-w-[450px];
    width: calc(80vw - 2rem);

    * {
      @apply whitespace-normal;
    }

    .product-card {
      @apply flex-1;
    }
  }
}